<script lang="ts">
import { defineComponent, ref, toRaw } from "vue";
import { list_api } from "@/package/my/api/area";

import PopupBottom from "@/components/popup/bottom.vue";

export default defineComponent({
  components: { PopupBottom },
  setup() {
    let pickerCallback: ((area: string) => void) | undefined = undefined;

    const visible = ref(false);
    const province = ref("");

    const hotList = ref<any[]>([]);
    const hotClick = (index: number) => {
      pickerCallback?.(toRaw(hotList.value)[index].province_city);
      visible.value = false;
    };

    const listData = ref<any[]>([]);
    const areaClick = (index: number, index2: number) => {
      const area = toRaw(listData.value)[index].items[index2];
      if (area.city_list && area.city_list.length !== 0) {
        listData.value = area.city_list;
        province.value = area.name;
      } else {
        pickerCallback?.(`${province.value}${area.name}`);
        visible.value = false;
      }
    };

    const show = (callback: (area: string) => void) => {
      list_api().then((resp) => {
        hotList.value = resp.hot;
        listData.value = resp.list;
      });

      province.value = "";
      visible.value = true;
      pickerCallback = callback;
    };
    return { visible, province, hotList, hotClick, listData, areaClick, show };
  },
});
</script>

<template>
  <PopupBottom
    v-model="visible"
    title="请选择所在地区"
    :safeAreaInsetBottom="false"
  >
    <view class="area-picker">
      <view class="area-picker-province" v-if="province">
        {{ province }} - <text style="color: #295ae0">请选择</text>
      </view>
      <scroll-view class="area-picker-scroll" scroll-y>
        <view class="area-picker-hot" v-if="!province">
          <view class="area-picker-title2">热门城市</view>
          <view class="area-picker-list">
            <view
              class="area-picker-city"
              v-for="(i, d) of hotList"
              :key="i.id"
              @click="hotClick(d)"
            >
              {{ i.name }}
            </view>
          </view>
        </view>

        <view>
          <view
            class="area-picker-group"
            v-for="(i, d) of listData"
            :key="i.key"
          >
            <view class="area-picker-key">{{ i.key }}</view>
            <view
              class="area-picker-item"
              v-for="(j, x) of i.items"
              :key="j.id"
              @click="areaClick(d, x)"
            >
              {{ j.name }}
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </PopupBottom>
</template>

<style lang="scss">
.area-picker {
  padding-top: 20rpx;

  .area-picker-province {
    padding-top: 20rpx;
    padding-bottom: 40rpx;
    margin: 0 30rpx 20rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 44rpx;
    border-bottom: 1rpx solid #eeeeee;
  }

  .area-picker-scroll {
    height: 50vh;
  }

  .area-picker-hot {
    margin-bottom: 40rpx;
  }

  .area-picker-title2 {
    padding-left: 30rpx;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #999999;
    line-height: 44rpx;
  }

  .area-picker-list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30rpx;
    padding-right: 30rpx;
  }

  .area-picker-city {
    flex-shrink: 0;
    width: 25%;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 44rpx;
    text-align: center;
  }

  .area-picker-group {
    position: relative;
    padding-left: 94rpx;
  }

  .area-picker-key {
    position: absolute;
    left: 30rpx;
    top: 0;
    font-size: 28rpx;
    color: #333333;
    line-height: 44rpx;
  }

  .area-picker-item {
    margin-bottom: 40rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 44rpx;
  }
}
</style>
